  <template>
  <div>
    <div class="tabs">
      <div class="tab" @click="changeTab('child')">变成child</div>
      <div class="tab" @click="changeTab('son')">变成son</div>
    </div>
    <transition mode="out-in">
      <component :is="currComponents" :currComponents="currComponents"></component>
    </transition>
  </div>
</template>
    
<script>
import {Info} from "@/uti/index.js"
import child from "./components/child.vue"
import son from "./components/son.vue"
export default {
  components: {
    child,
    son
  },
  data() {
    return {
      canvas: {},
      currComponents: "child"
    }
  },
  mounted() {
    console.log("this.canvas?.test...",this.canvas.test?.Info)
    this.canvas.test?.Info
    let msg = new Info(20)
    console.log("classify....", msg)
  },
  methods: {
    changeTab(val) {
      this.currComponents = val
    },
    save() {
      // 将canvas上的内容转成blob流
      this.canvas.toBlob(blob => {
        // 获取当前时间并转成字符串，用来当做文件名
        const date = Date.now().toString()
        // 创建一个 a 标签
        const a = document.createElement('a')
        // 设置 a 标签的下载文件名
        a.download = `${date}.png`
        // 设置 a 标签的跳转路径为 文件流地址
        a.href = URL.createObjectURL(blob)
        // 手动触发 a 标签的点击事件
        a.click()
        // 移除 a 标签
        a.remove()
      })
    }
  }
}
</script>